<template>
  <div class="m-digital" :style="{ color: props.color }">
    <span class="m-digital__text">{{ isFormat ? numberFormat(props.number) : props.number }}</span>
    <span class="m-digital__uom">{{ uom }}</span>
  </div>
</template>

<script setup>
import { numberFormat } from '@/utils/tools'
/**
 * 使用方法：
 * <m-digital :number="9999" color="red" />
 *
 * props:
 *    number  数值
 *    color   颜色
 */
const props = defineProps({
  number: {
    type: Number,
    default: 0
  },
  color: {
    type: String,
    default: '#FFF'
  },
  uom: {
    type: String,
    default: ''
  },
  isFormat: {
    type: Boolean,
    default: true
  }
})
</script>

<style lang="less" scoped>
.m-digital {
  font-size: 42px;
  text-align: center;
  line-height: 1;
  padding: 10px;
  letter-spacing: 4px;
  font-family: fantasy;

  // vertical-align: baseline;
  // display: flex;
  // align-items: center;
  span {
    display: inline-block;
  }
}
</style>
